<template>
    <div class="home container">
        <Header></Header>
        <Header2></Header2>
        <div class="block  container navel-in">
            <div class="row cc">

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            label="更新时间"
                            width="180">
                        <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{scope.row.updated_time|format}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="author_name"
                            label="作者"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="category_name"
                            label="类型"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="书名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="desc"
                            label="简介"
                            width="400">
                    </el-table-column>
                    <el-table-column
                            prop="current_status"
                            label="状态"
                            width="80">
                    </el-table-column>
                    <el-table-column label="操作">

                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="check_out(scope.row.id)">查看更多
                            </el-button>


                        </template>

                    </el-table-column>
                </el-table>
                <div class="block">
                    <!--分页开始-->
                    <el-pagination
                            @current-change="handleCurrentChange"
                            background
                            layout="prev, pager, next"
                            :page-size="size"
                            :total="total_count">
                    </el-pagination>
                    <!--分页结束-->
                </div>
                <Footer></Footer>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Header2 from "../components/Header2";
    import Footer from "../components/Footer";

    export default {
        name: 'Free',

        data() {
            return {
                tableData: [],
                total_count: 0,
                size: 10,
            }
        },
        created() {
            this.$axios.get(`${this.$settings.base_url}/book/free/?page=1&size=${this.size}`).then(response => {
                // console.log('Free.vue response.data', response.data);
                this.tableData = response.data.results;
                this.total_count = response.data.count;
            }).catch(error => {
            })
        },
        methods: {
            check_out(id) {
                this.$router.push(`/detail/${id}`)
            },
            handleCurrentChange(val) {
                this.$axios.get(`${this.$settings.base_url}/book/free/?page=${val}&size=${this.size}`).then(response => {
                    // console.log('Free.vue response.data', response.data);
                    this.tableData = response.data.results;
                })
            }

        },
        components: {
            Header,
            Header2,
            Footer,
        }
    }

</script>
<style>
    .navel-in {
        margin-top: 20px;
    }
</style>

